<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>
<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/localTravelAdd')}">
    <dl>
      <dt> 所属兴趣：</dt>
      <dd>
          <foreach name="catArr" item="catArr">
          <input type="checkbox" name="catID[]" value="{$catArr.id}" style="margin-left:10px;" />{$catArr.name}
          </foreach>
      </dd>
    </dl>
    <dl>
      <dt>线路名称：</dt>
      <dd>
        <input type="text" name="title" class="inp_one inp_w550" maxlength="30"  /><font color="red">(最长30个字符)</font>
        &nbsp;<input type="checkbox" name="verify"  />&nbsp;二次确认 </dd>
    </dl>
    <dl>
      <dt>扩展名称：</dt>
      <dd>
        <input type="text" name="extend" class="inp_one inp_w550" maxlength="35"  /> <font color="red">(最长35个字符)</font>
      </dd>
    </dl>
    <dl>
      <dt>主站分类：</dt>
      <dd>
        <select name="categoryID" onchange="packCategory(this)">
          <option value="0">请选择</option>
          <foreach name="categoryArr" item="categoryArr">
          <option value="{$categoryArr.id}">{$categoryArr.name}</option>
          </foreach>
        </select>
      </dd>
    </dl>
    <dl>
      <dt>主站分类标签：</dt>
      <dd id="categoryLabelList">
      </dd>
    </dl>
    <dl>
      <dt> 目的地：</dt>
      <dd>
        <div>
          <select name="areaID" onchange="destinationChange(this,1)">
              <option value="0">请选择地区</option>
              <foreach name="destinationArr" item="destinationArr">
              <option value="{$destinationArr.id}">{$destinationArr.name}</option>
              </foreach>
          </select>
          <select name="countryID"  onchange="destinationChange(this,2)">
            <option>请选择国家</option>
          </select>
          <select name="cityID" onchange="destinationChange(this,3)">
            <option>请选择城市</option>
          </select>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 出发时间：</dt>
      <dd>
        <input type="text" name="departureDate" class="inp_default"  >
      </dd>
    </dl>
    <dl>
      <dt> 行程天数 ：</dt>
      <dd>
        <input type="text" name="travelDays" class="inp_small" />日
        <input type="text" name="travelNight" class="inp_small" />晚 
      </dd>
    </dl>
     <dl>
      <dt> 市场价：</dt>
      <dd>
        <input type="text" name="marketPrice" class="inp_small" /> /人起
      </dd>
    </dl>
    <dl>
      <dt> 现价：</dt>
      <dd>
        <input type="text" name="price" class="inp_small" /> /人起
      </dd>
    </dl>
     <dl>
      <dt> 产品缩略图：</dt>
      <dd>
        <div><font color="red">(尺寸:320px*210px)</font></div>
        <div style="width: 120px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
          <input type="file" name="filedata" id="litPic" onChange="uploadPic(this,'litPic')" style="width:120px; height: 120px; position: absolute; right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999">
          <div  class="fileupload" style="  position: absolute;width: 120px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
          </div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 产品大图：</dt>
      <dd>
      <div><font color="red">(尺寸:宽度1920px为佳，比例2:1)</font></div>
        <div style="width: 120px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
          <input type="file" name="filedata" id="bigPic" onChange="uploadPic(this,'bigPic')" style="width:120px; height: 120px; position: absolute; right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999">
          <div  class="fileupload" style="  position: absolute;width: 120px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
          </div>
        </div>
      </dd>
    </dl>
    <dl>
      <dt> 关键词：</dt>
      <dd>
        <input type="text" name="keyWords" class="inp_w250" />
        <span class="tip">多关键词之间以英文逗号"|"分隔</span></dd>
    </dl>
    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <input type="button" class="button-green" onclick="submitDo()" value="保 存">
      &nbsp;
      <input type="button" onclick="goUrl('{:U('/Home/Product/sell')}')" class="button-return" value="返回产品列表">
    </div>
  </form>
</div>
<script type="text/javascript">
 /**
  * [submitDo description]
  * @return {[type]} [description]
  */
function submitDo() 
{ 
  if($('input[name="title"]').length > 0)
  {
    if($('input[name="title"]').val().length > 0)
    {
      $('input[name="title"]').css('border','1px green solid');
      $('#form_do').submit();
    }
    else
    {
      $('input[name="title"]').css('border','1px red solid');
    }
  }
  else
  {
    $('#form_do').submit();
  }

}
$(function() {

  wrapForm('litPic','Product');
  wrapForm('bigPic','Product');

});
/**
 * [categoryLabelList description]主站分类标签分类
 * @return {[type]} [description]
 */
 function categoryLabelList (obj)
 {

   $.ajax({
     url: '{:U(MODULE_NAME.'/Product/categoryLabelList')}',
     type: 'get',
     dataType: 'json',
     data: {'id': $(obj).val()},
     success:function  (data)
     {
       $('#categoryLabelList').html(data.html);
     }
   })
 }

/**
 * [packCategory description]主站分类
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
 function packCategory (obj)
 {
   var packCategoryOne = $(obj).val();
   $(obj).nextAll().remove();
   if(packCategoryOne == 0)return;
   $.ajax({
     url: '{:U(MODULE_NAME.'/Product/packCategoryAjax')}',
     type: 'get',
     dataType: 'json',
     data: {'packCategoryOne': packCategoryOne},
     success:function (data)
     {
       $(obj).parent().append(data.html);
     }
   })

 }

/**
 * [wrapForm description]
 * @param  {[type]} id   [description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function wrapForm (id,type)
{

  if(id == 'bigPic')
  {
    $("#"+id).wrap("<form class='uploadImg' action='/Home/Public/uploadPic/fileType/Img/type/"+type+"/corp/1.html' method='post' enctype='multipart/form-data'></form>");
  }
  else
  {

  $("#"+id).wrap("<form class='uploadImg' action='/Home/Public/uploadPic/fileType/Img/type/"+type+".html' method='post' enctype='multipart/form-data'></form>");
  }
}
  /**
   * [uploadPic description]
   * @param  {[type]} obj [description]
   * @return {[type]}     [description]
   */
  function uploadPic(obj,name)
  {
      if($(obj).val() == "") return;

      $(obj).parent().ajaxSubmit({
          dataType:  'json',
          beforeSend: function() {
            $(obj).parent().parent().find('.fileupload').empty();
            $(obj).parent().parent().find('.fileupload').html("正在上传中...");
          },
          success: function(data) {

            if(data.state == 'SUCCESS')
            {
                $(obj).parent().parent().find('.fileupload').empty();
                $(obj).parent().parent().find('.fileupload').html("<img src='http://www.tripvip.cn"+data.url+"' width='120' height='120'>");
                $(obj).parent().parent().find('.fileupload').append("<input type='hidden' name='"+name+"' class='"+name+"' value='"+data.url+"'>");
                if(data.mobileUrl != false)
                {
                  $(obj).parent().parent().find('.fileupload').append("<input type='hidden' name='mobile"+name+"' class='mobile"+name+"' value='"+data.mobileUrl+"'>");
                }

            }
            else
            {
                $(obj).parent().parent().find('.fileupload').html(data.msg);
            }
        },
        error:function(xhr){
          $(obj).parent().parent().find('.fileupload').html('上传失败!');
          $(obj).parent().parent().find('.fileupload').html(xhr);
        }
      });
  }

/**
 * [destination description]
 * @param  {[type]} o    [description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function destinationChange (o,type)
{
  var div = $(o).parent();
  var get = {};
  var obj = $(o);
  if(obj.val() == 0)
  {
    obj.nextAll('select').val('0');
    return;
  }

  if(type==1)
  {
	get.continent = div.find('[name="areaID"]').val();
    obj = div.find('[name="countryID"]');
  }
  else if(type==2)
  {
    get.country = div.find('[name="countryID"]').val();
    obj = div.find('[name="cityID"]');
  }
  else
  {
	  return false;
  }

  $.get('/Home/Public/ajaxDestination',get, function (data, textStatus){
    obj.html(data);
  });
}

</script>